<!--
 * @Description: 炒菜系列
 * @Author: Zhanghan
 * @Date: 2024-11-19 15:41:14
 * @LastEditTime: 2025-03-08 10:29:38
 * @LastEditors: Zhanghan
-->
<template>
  <div class="foodOne">
    <ElRow>
      <ElCol :span="12">
        <ElCard style="max-width: 480px">
          <template #header>
            <div>
              <span class="header">青椒炒肉</span>
            </div>
          </template>
          <div class="content">
            <div class="content-top">
              <img :src="P1" class="p1" />
              <div class="p1_des">青椒炒肉示例图</div>
            </div>
            <div class="content-bottom">
              <div class="left">
                <img class="p2" :src="P2" />
                <p>腌肉示例图</p>
              </div>
              <div class="right">
                <img class="p3" :src="P3" />
                <p>炒菜示例图</p>
              </div>
            </div>
          </div>
          <template #footer>
            <div>
              <div>1.准备工作（准备青椒，猪肉等等按个人口味准备）</div>
              <div>2.青椒切成丝或片，肉片切片腌制（15分钟）</div>
              <div>3.腌制：两勺生抽，一勺老抽，一勺盐，一勺油，淀粉一勺</div>
              <div>4.锅加热，青椒干瘪至虎皮状,捞出</div>
              <div>
                5.烧油，放入腌制好的肉，炒至半成熟，放入青椒，最后放入半勺老抽，半勺糖，可适当加水
              </div>
            </div>
          </template>
        </ElCard>
      </ElCol>
      <ElCol :span="12">
        <div class="mb-2">右侧</div>

        <ElButton @click="copyToClipboard('奥特曼猪猪侠')" type="primary"
          >点击复制</ElButton
        >
      </ElCol>
    </ElRow>
  </div>
</template>
<script setup lang="ts">
import { ElCard, ElRow, ElCol, ElButton } from "element-plus";
import P1 from "@/assets/dish/p1.jpg";
import P2 from "@/assets/dish/p2.jpg";
import P3 from "@/assets/dish/p3.jpg";
import { ref } from "vue";
import { useMessage } from "@/hooks/useMessage";

const loading = ref(false);
const message = useMessage();

function copyToClipboard(text: any) {
  loading.value = true;
  navigator.clipboard
    .writeText(text)
    .then(() => {
      loading.value = false;
      console.log("复制成功！");
      message({
        type: "success",
        message: "复制成功！",
      });
    })
    .catch((err) => {
      loading.value = false;
      console.error("复制失败：", err);
    });
}
</script>
<style lang="less" scoped>
//图片类型
@pic-type: {
  width: 100%;
  height: 140px;
  display: block; //取消图片自带的margin
};

@p-bg: lightblue;

.foodOne {
  .header {
    font-weight: bold;
    font-size: 18px;
  }
  .content {
    width: 100%;
    height: auto;
    .content-top {
      width: 100%;
      height: auto;
      margin-bottom: 20px;
      .p1 {
        @pic-type();
      }
      .p1_des {
        width: 100%;
        height: 30px;
        background: @p-bg;
        line-height: 30px;
        text-align: center;
      }
    }
    .content-bottom {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      .left,
      .right {
        width: 45%;
        .p2,
        .p3 {
          @pic-type();
        }
        p {
          width: 100%;
          height: 30px;
          background: @p-bg;
          line-height: 30px;
          text-align: center;
        }
      }
    }
  }
}
</style>
